<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work22-3-4</title>
    <script src="./jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
    <script src="../vue.global.js"></script>
</head>
<body>
    
    <div id="container">
        <div v-for="(item, index) in stData" :key="index">
            
            <div class="card" style="width: 18rem;height: 19rem;">
                <img :src="item.head" class="m-auto" style="width: 50px;height: 50px;" alt="...">
                <div class="card-body">
                  <h5 class="card-title"></h5>
                  <div :class="'' + index">
                    <p class="card-text">姓名：{{item.name}}</p>
                    <p class="card-text">年龄：{{item.age}}</p>
                    <p class="card-text">性别：{{item.sex}}</p>
                    <p class="card-text">总分：{{item.yw + item.yy + item.sx}}</p>
                  </div>
                  <div :class="'-' + index" style="display: none;">
                    <p class="card-text">数学：{{item.sx}}</p>
                    <p class="card-text">语文：{{item.yw}}</p>
                    <p class="card-text">英语：{{item.yy}}</p>
                  </div>
                  
                  <div v-if="item.yw + item.yy + item.sx > 200" class="cum flex-column text-center" style="background-color: dimgray;font-weight: bolder;color: aliceblue;" @mouseover="displayList(index)" @mouseout="hiddenList(index)">
                    ——
                  </div>
                </div>
              </div>
        </div>
        
    </div>

</body>
<script src="./work22-3-4.js"></script>
<link rel="stylesheet" href="./work22-3-4.css">
</html>